@media only screen and (max-width: 1000px) {
    nav section, section{
        width: 800px;
    }
    header section h1, header section img{
        width: 50%;
    }
    #gallery{
        width: 90vw;
    }
    #gallery h4{
        text-align: center;
    }
    #pictures{
        column-gap: 7.5vw;
        row-gap: 7.5vw;
        grid-template-columns: 25vw 25vw 25vw;
    }
    .picture_opener{
        width: 25vw;
        height: 25vw;
    }
    #nav_right, #nav_right h3{
        font-size: 16px !important;
        gap: 1px; /* mniejsze odstępy */
        display: flex;
        align-items: center;
    }
}

@media only screen and (max-width: 800px) {
    section{
        width: 100%;
    }
    #nav_right{
        display: flex !important; /* już się nie chowa */
        flex-wrap: wrap; /* zawijanie w razie braku miejsca */
        gap: 6px; /* mniejsze odstępy */
        justify-content: center; /* wyśrodkowanie */
        font-size: 16px;
        align-items: center;
    }
    nav{
        padding-left: 0;
        flex-wrap: wrap;
        justify-content: center;
        box-sizing: border-box;
    }
    nav img{
        width: 120px; /* mniejsze logo */
        height: auto;
    }
    #nav_right > div{
        padding-left: 10px;
        padding-right: 10px;
        height: auto;
    }
    #login{
        text-align: center;
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width: 600px) {
    header section{
        flex-direction: column-reverse;
    }
    header section h1, header section img{
        padding: 0;
        width: 90%;
        text-align: center;
    }
    footer{
        text-align: center;
    }
}

@media only screen and (max-width: 400px) {
    #apply > div{
        width: 90%;
    }
    #apply input, textarea{
        width: 90%;
    }
}